<template>
	<div class="ui-imgshow" :style="style" :class="classname" >
		<div class="ui-imgshow-bigimg" :class="isShowBigimg?'on':''"  v-show="isshow" :style="{width:blockxy.width+'px',height:blockxy.height+'px'}">
			<img :src="data[recordNum].bigimg?data[recordNum].bigimg:data[recordNum].img" ref="bigImg2" class="ui-imgshow-bigimg-img"/>
		</div>
		<div class="ui-imgshow-img-block" ref="block"  @mousemove="mousemove" @mouseover="mouseover" @mouseout="mouseout">
			<div class="ui-imgshow-drag" ref="dragobj" :style="dragobjStyle" v-show="isshow"></div>
			<img :src="data[recordNum].img" class="ui-imgshow-img" ref="bigimg">
		</div>
		<div class="ui-imgshow-list">
			<div :style="{width:width+'px',left:scrollPosition+'px'}" ref="scroll" class="ui-imgshow-scroll">
				<img v-for="(v,k) in data" :style="{width:imgwidth+'px'}" class="ui-imgshow-smallimg" :class="v.focus" :src="v.smallimg?v.smallimg:v.img" @click="click(k)"/>
			</div>
		</div>
	</div>
</template>



<script>
	/*商品展示图片切换
	组件属性[
		style:自定义样式
		classname:自定义class
		data:图片列表 array=[{img:"图片路径",smallimg:"缩略图",bigimg:"放大图",title:"文字"},...	]
		showtext:是否显示文字 true/false
		smallnum:缩略图显示张数
	]
	*/
	export default{
		props:{
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'showtext':{type:Boolean,default:false},
			'smallnum':{type:Number,default:4},
			'data':{
				type:Array,
				default:[
					{
                        smallimg:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",
					    img:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",title:"标题一",
                        bigimg:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",
                        title:"标题一",

                    },
					{
					    img:"http://img.dabeiduo.cn:9004/Img/Scenic/1/7a516e680aa861e985513dc0fee3.jpg",
						title:"标题二",
                        bigimg:"http://img.dabeiduo.cn:9004/Img/Scenic/1/7a516e680aa861e985513dc0fee3.jpg"
					},
					{
					    img:"http://img.dabeiduo.cn:9004/UploadV2_1/Catering/5913c3ff4a645.jpg",
						title:"标题三",
                        bigimg:"http://img.dabeiduo.cn:9004/UploadV2_1/Catering/5913c3ff4a645.jpg"
					},
                    {
                        smallimg:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",
                        img:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",title:"标题一",
                        bigimg:"http://www.dabeiduo.com/Public/Img/bd2.11_img27.jpg",
                        title:"标题一",

                    },
                    {
                        img:"http://img.dabeiduo.cn:9004/Img/Scenic/1/7a516e680aa861e985513dc0fee3.jpg",
                        title:"标题二",
                        bigimg:"http://img.dabeiduo.cn:9004/Img/Scenic/1/7a516e680aa861e985513dc0fee3.jpg"
                    },
                    {
                        img:"http://img.dabeiduo.cn:9004/UploadV2_1/Catering/5913c3ff4a645.jpg",
                        title:"标题三",
                        bigimg:"http://img.dabeiduo.cn:9004/UploadV2_1/Catering/5913c3ff4a645.jpg"
                    },
				]
			}
		},
		data(){
			return {
				uiType:"ui-carousel",
                recordNum:0,//当前图片
				width:"auto",
                imgwidth:"auto",
                scrollWidth:0,
				scrollPosition:0,
                isShowBigimg:false,
                blockxy:{width:0,height:0},
                dragObjxy:null,
                dragobjStyle:{},
                isshow:true//如果放大图小于左侧正常图片尺寸则不展示大图
            }
		},
        methods:{
			click(index){
			    //切换图片
				let leftNum=Math.abs(parseInt(this.$refs.scroll.css('left')/this.scrollWidth));
				this.recordNum=index;
                for(let a=0;a<this.data.length;a++){
                    this.$set(this.data[a],'focus',a==this.recordNum?"on":"");
                }
                if(index+1-leftNum>this.smallnum/2){
                    if(this.data.length-leftNum>this.smallnum){
                        this.scrollPosition -= this.scrollWidth;
                    }
				}else{
                    if(leftNum>0){
                        this.scrollPosition += this.scrollWidth;
                    }
				}
			},
            mouseover(event){
			    if(event.currentTarget==this.$refs.block){
			        let offset,self=this;
                    this.blockxy=this.$refs.block.offset();
                    let fors=setInterval(function () {
                        offset=self.$refs.bigImg2.getSize();
                        if(offset.width && offset.width>0){
                            clearInterval(fors);
                            self.dragobjStyle={
								width:self.blockxy.width/offset.width*self.blockxy.width+'px',
								height:self.blockxy.height/offset.height*self.blockxy.height+'px'
							};
                            //console.log(offset.width>self.blockxy.width ,offset.height>self.blockxy.height);
                            if(offset.width>self.blockxy.width && offset.height>self.blockxy.height){
                                self.isshow=true;
                                self.isShowBigimg=true;
                            }
                        }
                    });
				}
			},
            mouseout(){
                this.isShowBigimg=false;
                this.isshow=false;
            },
            mousemove(event){
                if(!this.isshow)return;
				let xy= getMousePos(event);
                let bigImgOffset=this.$refs.bigImg2.offset();
                this.dragObjxy=this.$refs.dragobj.offset();

				xy={
				    x:xy.x-this.blockxy.left-this.dragObjxy.width/2,
				    y:xy.y-this.blockxy.top-this.dragObjxy.height/2
				}

				if(xy.x<0){
				    xy.x=0;
				}else if(xy.x+this.dragObjxy.width>this.blockxy.width){
                    xy.x=this.blockxy.width-this.dragObjxy.width;
				}
                if(xy.y<0){
                    xy.y=0;
                }else if(xy.y+this.dragObjxy.height>this.blockxy.height){
                    xy.y=this.blockxy.height-this.dragObjxy.height;
                }
                this.$refs.dragobj.css({
					left:xy.x+"px",
					top:xy.y+"px"
				});
                this.$refs.bigImg2.css({
					marginLeft:-(bigImgOffset.width*xy.x/this.blockxy.width)+"px",
					marginTop:-(bigImgOffset.height*xy.y/this.blockxy.height)+"px"
				});
            }
		},
		mounted(){
            this.width=this.data.length*(this.$refs.bigimg.width/this.smallnum+5);
            this.imgwidth=this.$refs.bigimg.width/this.smallnum-(5/this.smallnum)*(this.smallnum-1);
            this.scrollWidth=this.imgwidth+5;
        }
	}
</script>
